<template>
  <el-container>
    <el-main>
      <div class="sku-table-wrap">
        <table class="sku-table" rules="none">
          <thead>
            <tr>
              <th class="sku-item" v-for="ss in goods.skus" :key="ss">
                {{ ss.name }}
              </th>
              <th class="sku-item">库存</th>
              <th class="sku-item">价格</th>
              <th class="sku-item">销量</th>
              <th class="sku-item">活动库存</th>
              <th v-if="['groupon', 'seckill'].includes(modal.params.model.type)" class="sku-item">
                活动价格
              </th>
              <th
                class="sku-item"
                v-if="
                  modal.params.model.type == 'groupon' &&
                  modal.params.model.rules.is_leader_discount == 1
                "
              >
                团长价格
              </th>
              <template v-if="modal.params.model.type == 'groupon_ladder'">
                <th class="sku-item">
                  {{ modal.params.model.rules.ladders.ladder_one }}人团价格
                </th>
                <th class="sku-item" v-if="modal.params.model.rules.is_leader_discount == 1">
                  {{ modal.params.model.rules.ladders.ladder_one }}人团长价格
                </th>
                <th class="sku-item">
                  {{ modal.params.model.rules.ladders.ladder_two }}人团价格
                </th>
                <th class="sku-item" v-if="modal.params.model.rules.is_leader_discount == 1">
                  {{ modal.params.model.rules.ladders.ladder_two }}人团长价格
                </th>
                <template
                  v-if="Object.keys(modal.params.model.rules.ladders).includes('ladder_three')"
                >
                  <th class="sku-item">
                    {{ modal.params.model.rules.ladders.ladder_three }}人团价格
                  </th>
                  <th class="sku-item" v-if="modal.params.model.rules.is_leader_discount == 1">
                    {{ modal.params.model.rules.ladders.ladder_three }}人团长价格
                  </th>
                </template>
              </template>
              <th class="sku-item">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(sp, spindex) in goods.skuPrice" :key="sp">
              <td class="sku-item" v-for="st in sp.goods_sku_text" :key="st">
                {{ st }}
              </td>
              <td class="sku-item">{{ sp.stock }}</td>
              <td class="sku-item">{{ sp.price }}</td>
              <td class="sku-item">{{ sp.sales }}</td>
              <th class="sku-item">
                <el-input
                  v-if="goods.activity_sku_prices[spindex].status == 'up'"
                  type="number"
                  v-model="goods.activity_sku_prices[spindex].stock"
                ></el-input>
              </th>
              <th v-if="['groupon', 'seckill'].includes(modal.params.model.type)" class="sku-item">
                <el-input
                  v-if="goods.activity_sku_prices[spindex].status == 'up'"
                  type="number"
                  v-model="goods.activity_sku_prices[spindex].price"
                  :disabled="modal.params.activityStatus"
                ></el-input>
              </th>
              <th
                class="sku-item"
                v-if="
                  modal.params.model.type == 'groupon' &&
                  modal.params.model.rules.is_leader_discount == 1
                "
              >
                <el-input
                  v-if="goods.activity_sku_prices[spindex].status == 'up'"
                  type="number"
                  v-model="goods.activity_sku_prices[spindex].leader_price"
                  :disabled="modal.params.activityStatus"
                ></el-input>
              </th>
              <template v-if="modal.params.model.type == 'groupon_ladder'">
                <th class="sku-item">
                  <el-input
                    v-if="goods.activity_sku_prices[spindex].status == 'up'"
                    type="number"
                    v-model="goods.activity_sku_prices[spindex].ladder_one"
                    :disabled="modal.params.activityStatus"
                  ></el-input>
                </th>
                <th class="sku-item" v-if="modal.params.model.rules.is_leader_discount == 1">
                  <el-input
                    v-if="goods.activity_sku_prices[spindex].status == 'up'"
                    type="number"
                    v-model="goods.activity_sku_prices[spindex].ladder_one_leader"
                    :disabled="modal.params.activityStatus"
                  ></el-input>
                </th>
                <th class="sku-item">
                  <el-input
                    v-if="goods.activity_sku_prices[spindex].status == 'up'"
                    type="number"
                    v-model="goods.activity_sku_prices[spindex].ladder_two"
                    :disabled="modal.params.activityStatus"
                  ></el-input>
                </th>
                <th class="sku-item" v-if="modal.params.model.rules.is_leader_discount == 1">
                  <el-input
                    v-if="goods.activity_sku_prices[spindex].status == 'up'"
                    type="number"
                    v-model="goods.activity_sku_prices[spindex].ladder_two_leader"
                    :disabled="modal.params.activityStatus"
                  ></el-input>
                </th>
                <template
                  v-if="Object.keys(modal.params.model.rules.ladders).includes('ladder_three')"
                >
                  <th class="sku-item">
                    <el-input
                      type="number"
                      v-model="goods.activity_sku_prices[spindex].ladder_three"
                      v-if="goods.activity_sku_prices[spindex].status == 'up'"
                      :disabled="modal.params.activityStatus"
                    ></el-input>
                  </th>
                  <th class="sku-item" v-if="modal.params.model.rules.is_leader_discount == 1">
                    <el-input
                      v-if="goods.activity_sku_prices[spindex].status == 'up'"
                      type="number"
                      v-model="goods.activity_sku_prices[spindex].ladder_three_leader"
                      :disabled="modal.params.activityStatus"
                    ></el-input>
                  </th>
                </template>
              </template>
              <th class="sku-item">
                <template v-if="!modal.params.activityStatus">
                  <el-button
                    v-if="goods.activity_sku_prices[spindex].status == 'up'"
                    class="is-link"
                    type="danger"
                    @click="goods.activity_sku_prices[spindex].status = 'down'"
                    >取消</el-button
                  >
                  <el-button
                    v-if="goods.activity_sku_prices[spindex].status == 'down'"
                    class="is-link"
                    type="primary"
                    @click="goods.activity_sku_prices[spindex].status = 'up'"
                    >参与</el-button
                  >
                </template>
                <template v-if="modal.params.activityStatus">-</template>
              </th>
            </tr>
          </tbody>
        </table>
      </div>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button type="primary" @click="modelBack">确定</el-button>
    </el-footer>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive } from 'vue';
  import { api } from '../activity.service';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps(['modal']);

  const findItem = props.modal.params.model.goods_list.find(
    (item) => item.id == props.modal.params.goods_id,
  );

  const goods = reactive({
    skus: [],
    skuPrice: [],
    activity_sku_prices: [],
  });

  async function getSkus() {
    const { data } = await api.activity.skus({
      id: props.modal.params.model.id,
      goods_id: props.modal.params.goods_id,
      activity_type: props.modal.params.model.type,
      start_time: props.modal.params.model.start_time,
      end_time: props.modal.params.model.end_time,
      prehead_time: props.modal.params.model.prehead_time,
    });
    goods.skus = data.skus;
    goods.skuPrice = data.sku_prices;
    goods.activity_sku_prices = findItem.activity_sku_prices || data.activity_sku_prices;
  }

  function modelBack() {
    emit('modalCallBack', { event: 'confirm', data: goods.activity_sku_prices });
  }

  onMounted(() => {
    getSkus();
  });
</script>
<style lang="scss" scoped>
  .sku-table-wrap {
    width: 100%;
    overflow: auto;
    .sku-table {
      font-size: 12px;
      font-weight: 500;
      thead {
        line-height: 40px;
        background: var(--sa-table-header-bg);
        color: var(--subtitle);
      }
      tbody {
        tr {
          line-height: 48px;
          color: var(--sa-font);
          &:nth-of-type(2n) {
            background: var(--sa-table-striped);
          }
        }
      }
      th,
      td {
        padding: 0 16px;
        text-align: left;
      }
    }
    .sku-item {
      min-width: 100px;
      flex-shrink: 0;
    }
  }
</style>
